<template>
	<el-dialog :visible.sync="visible" title="填写应用信息" width="500px">
		<el-form :model="form" :rules="rules" label-width="100px" ref="form" style="width: 100%">
			<el-form-item label="所属事业部" prop="biz_id">
				<cl-select v-model="form.biz_id" filterable style="width: 92%">
					<el-option
						v-for="(item, index) in business"
						:key="index"
						:label="item.biz_name"
						:value="item.biz_id"
					></el-option>
				</cl-select>
			</el-form-item>
			<el-form-item label="所属品牌" prop="bra_id">
				<cl-select
					v-model="form.bra_id"
					placeholder="请选择品牌"
					filterable
					style="width: 92%"
				>
					<el-option
						v-for="item in bizRefData.brand"
						:key="item.bra_id"
						:label="item.bra_name"
						:value="item.bra_id"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item label="应用名称" prop="app_name">
				<div class="inputBox">
					<el-input v-model="form.app_name"></el-input>
					<i class="el-icon-warning" @click="getDrawer"></i>
				</div>
			</el-form-item>
			<el-form-item label="APP__ID" prop="app_id">
				<div class="inputBox">
					<el-input v-model="form.app_id"></el-input>
					<i class="el-icon-warning" @click="getDrawer"></i>
				</div>
			</el-form-item>
			<el-form-item label="Secret" prop="app_secret">
				<div class="inputBox">
					<el-input v-model="form.app_secret"></el-input>
					<i class="el-icon-warning" @click="getDrawer"></i>
				</div>
			</el-form-item>
			<el-form-item label="上报先锋计划" prop="xianfeng_status" style="width: 92%">
				<el-switch 
					v-model="form.xianfeng_status" 
					:active-value="1" 
					:inactive-value="0"
					@change="xianfengChange"
				/>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="primary" @click="submit">确 定</el-button>
		</div>
		<tips ref="tipsRef" />
	</el-dialog>
</template>
<script>
import tips from "./tips";
export default {
	components: { tips },
	data() {
		return {
			form: {
				biz_id: "",
				app_name: "",
				app_id: "",
				app_secret: "",
				bra_id: "",
				xianfeng_status:0
			},
			rules: {
				biz_id: [{ required: true, message: "请选择事业部", trigger: "blur" }],
				bra_id: [{ required: true, message: "请选择品牌", trigger: "blur" }],
				app_id: [{ required: true, message: "请输入应用ID", trigger: "blur" }],
				app_name: [{ required: true, message: "请输入应用名", trigger: "blur" }],
				app_secret: [{ required: true, message: "请填写密码", trigger: "blur" }]
			},
			visible: false
		};
	},
	computed: {
		bizRefData() {
			const { biz_id } = this.form;
			return this.getBizRefData(biz_id);
		}
	},
	methods: {
		//开启
		open(key, row, type,biz_id) {
			if (key === "add") {
				if (!type) {
					this.$message.warning("请选择媒体平台");
					return;
				}
				this.reset();
				this.form.type = type;
				this.form.biz_id=biz_id
				this.$refs.form?.resetFields();
			} else {
				this.form = {
					biz_id: row.biz_id,
					app_name: row.app_name,
					app_id: row.app_id,
					app_secret: row.app_secret,
					bra_id: row.bra_id,
					id: row.id,
					xianfeng_status:row.xianfeng_status
				};
				this.$refs.form?.resetFields();
			}
			this.visible = true;
		},
		//关闭
		close() {
			this.visible = false;
		},
		reset() {
			this.form = {
				biz_id: "",
				app_name: "",
				app_id: "",
				app_secret: "",
				xianfeng_status:0,
				bra_id: []
			};
		},
		//先锋计划开关
		xianfengChange(){
			this.form.xianfeng_status=this.form.xianfeng_status===0?0:1
		},
		//提交
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				const params = this.form;
				// console.log(params);
				try {
					if (params.type) {
						await this.$service.config.mediaApplicationAdd(params);
					} else {
						await this.$service.config.mediaApplicationEdit(params);
					}
					this.$message.success(params.type ? "新增成功" : "修改成功");
					this.$emit("refresh");
					this.visible = false;
				} catch (error) {
					this.$message.warning(error);
				}
			});
		},
		//弹出提示
		getDrawer() {
			this.$refs.tipsRef.open();
		}
	}
};
</script>
<style lang="scss" scoped>
.inputBox {
	display: flex;
	i {
		line-height: 28px;
		margin-left: 15px;
	}
}
</style>